<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-filter>
				<div class="filter-bar">
					<el-radio-group size="mini" v-model="selects.status" @change="changeStatus">
						<el-radio-button label="">全部商品</el-radio-button>
						<el-radio-button label="1">在线商品</el-radio-button>
						<el-radio-button label="0">已下架商品</el-radio-button>
					</el-radio-group>
					<!--<p-->
					<!--v-for="(item, index) in statusList"-->
					<!--:key="index"-->
					<!--:class="[{ active: activeIndex === index }]"-->
					<!--@click="changeStatus(index)"-->
					<!--&gt;-->
					<!--{{ item }}-->
					<!--</p>-->
					<!--				<el-select-->
					<!--					placeholder="请选择商品状态"-->
					<!--					size="mini"-->
					<!--					v-model="selects.status"-->
					<!--					@change="val => refresh({ status: val, page: 1 })"-->
					<!--				>-->
					<!--					<el-option label="全部商品" value></el-option>-->
					<!--					<el-option label="在线商品" value="1"></el-option>-->
					<!--					<el-option label="已下架商品" value="2"></el-option>-->
					<!--				</el-select>-->
				</div>
			</template>

			<template #table-column-goodsInfo="{scope}">
				<div class="goods-info">
					<img class="goods-img" :src="scope.row.pic" />
					<div class="right">
						<p class="name">{{ scope.row.name }}</p>
						<p class="price">
							券后价：<span>¥{{ scope.row.endPrice }}</span
							>原价：<span class="old">¥{{ scope.row.price }}</span>
						</p>
						<p class="sale">月销：{{ scope.row.sale }}</p>
						<div class="share-plan">
							<p class="plan">
								营销计划<span>{{ scope.row.commissionRate }}</span>
							</p>
							<p class="money">
								约<span>{{
									(
										(parseFloat(scope.row.endPrice) *
											scope.row.commissionRate) /
										100
									).toFixed(2)
								}}</span
								>元
							</p>
						</div>
					</div>
				</div>
			</template>
			<template #table-column-couponInfo="{scope}">
				<div class="coupon-info">
					<p class="coupon">{{ scope.row.couponMoney }}元券</p>
					<el-button type="text" size="small" v-copy="scope.row.couponUrl"
						>一键复制券链接</el-button
					>
					<p class="num">
						余{{ Number(scope.row.couponNum) - Number(scope.row.couponReceive) }}/{{
							scope.row.couponNum
						}}
					</p>
					<p class="end-time">有效期至{{ scope.row.couponEndtime }}</p>
				</div>
			</template>
			<template #table-column-reward="{scope}">
				<div class="reward-info">
					<p>总数：{{ scope.row.totalNum }}</p>
					<p>剩余：{{ scope.row.effectiveNum }}</p>
					<p>
						已奖励：<span>{{ scope.row.totalAwardCount }}</span>
					</p>
				</div>
			</template>
			<template #table-column-coin="{scope}">
				<div class="coin-info">
					<p>
						<span>{{ scope.row.totalAwardGoldAmount }}</span>
					</p>
					<p>单个{{ scope.row.goldAmount }}金币</p>
				</div>
			</template>
			<template #table-column-detailMsg="{scope}">
				<p>{{ scope.row.detailMsg ? '已上传' : '未上传' }}</p>
				<el-button
					type="text"
					size="small"
					v-if="!scope.row.detailMsg"
					@click="detailMsgDialog(scope.row)"
					>新增文案</el-button
				>
				<el-button type="text" size="small" v-else @click="detailMsgDialog(scope.row)"
					>编辑文案</el-button
				>
			</template>
			<template #table-column-status="{scope}">
				<el-switch
					v-model="scope.row.status"
					:active-value="1"
					:inactive-value="0"
					active-color="#13ce66"
					inactive-color="#ff4949"
				>
				</el-switch>
			</template>

			<template #slot-edit="{scope}">
				<el-button type="text" @click="onEdit(scope.row)">编辑</el-button>
			</template>
		</cl-crud>

		<cl-form ref="cl-form"></cl-form>
	</div>
</template>

<script>
import DetailMsgRich from './components/DetailMsgRich';
import moment from 'moment';
export default {
	name: 'manage',
	data() {
		return {
			crud: null,
			selects: {
				status: ''
			},
			subData: {},
			selectRow: [], // 当前选中行
			activeIndex: 0,
			statusList: ['全部商品', '在线商品', '已下架商品']
		};
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.promotion.goods)
				.set('table', {
					props: {
						'summary-method': this.getSummaries,
						showSummary: true,
						'default-sort': {
							order: 'descending',
							prop: ''
						}
					},
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center'
						},
						{
							label: '商品信息',
							prop: 'goodsInfo',
							align: 'center',
							minWidth: 350
						},
						{
							label: '优惠券信息',
							prop: 'couponInfo',
							align: 'center',
							minWidth: 160
						},
						{
							label: '今日销量',
							prop: 'todayLocalSale',
							align: 'center',
							minWidth: 100,
							sortable: true
						},
						{
							label: '总销量',
							prop: 'totalLocalSale',
							align: 'center',
							minWidth: 100,
							sortable: true
						},
						{
							label: '已奖励单数',
							prop: 'reward',
							align: 'center',
							minWidth: 100
						},
						{
							label: '奖励金币',
							prop: 'coin',
							align: 'center',
							minWidth: 100,
							sortable: true
						},
						{
							label: '是否上传文案',
							prop: 'detailMsg',
							minWidth: 100,
							align: 'center'
						},
						{
							label: '状态',
							prop: 'status',
							align: 'center'
						},
						{
							label: '排序',
							prop: 'level',
							align: 'center',
							sortable: true
						}
					],
					op: {
						layout: ['slot-edit', 'delete']
					}
					// on: {}
				})
				.set('search', {
					key: {
						placeholder: '商品ID/关键词'
					}
				})
				.set('layout', [
					['refresh-btn', 'slot-filter', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next, render }) => {
					const { list, subData } = await next(params);
					list.forEach(item => {
						item.couponEndtime = moment(parseFloat(item.couponEndtime) * 1000).format(
							'YYYY-MM-DD HH:mm:ss'
						);
					});
					this.subData = subData;
					render(list);
				})
				.done();
			app.refresh(this.params);
		},
		refresh(params) {
			this.crud.refresh(params);
		},
		getSummaries() {
			let todayLocalSaleSum = this.subData.todayLocalSaleSum;
			let totalLocalSaleSum = this.subData.totalLocalSaleSum;
			let totalAwardCountSum = this.subData.totalAwardCountSum;
			let totalAwardGoldAmountSum = this.subData.totalAwardGoldAmountSum;
			return [
				'总计',
				'',
				'',
				todayLocalSaleSum,
				totalLocalSaleSum,
				totalAwardCountSum,
				totalAwardGoldAmountSum
			];
		},
		changeStatus(status) {
			this.refresh({
				status: status
			});
		},
		onEdit(item) {
			this.$router.push({
				path: '/single/add',
				query: {
					id: item.id
				}
			});
		},
		detailMsgDialog(item) {
			let that = this;
			this.$refs['cl-form'].open({
				props: {
					title: '编辑文案',
					width: '750px',
					labelWidth: '0'
				},
				items: [
					{
						prop: 'detailMsg',
						value: item.detailMsg,
						component: DetailMsgRich,
						rules: {
							required: true,
							message: '精编文案不能为空'
						}
					}
				],
				on: {
					submit: ({ data, done, close }) => {
						that.$service.promotion.goods
							.update({
								id: item.id,
								isEditor: 1,
								...data
							})
							.then(() => {
								this.$message.success('修改成功');
								close();
								this.refresh();
							})
							.catch(error => {
								this.$message.error(error);
								done();
							});
					}
				}
			});
		}
	}
};
</script>

<style lang="stylus" scoped>
	.filter-bar {
		margin-left 20px;
		p {
			margin-right 10px;
			font-size 14px;
			cursor pointer
			transition 0.5s
			line-height 24px
			&.active, &:hover {
				color $main-color
			}
		}
	}
.goods-info {
	color #333
	flexBox(space-between)
	.goods-img {
		width 120px
		height 120px
	}
	.right {
		height 120px
		width 100%
		text-align left
		flex 1
		overflow auto
		margin-left 10px
		flexBox(space-between, null, column)
		.name {
			font-weight 600
			textOverflow(2)
		}
		.old {
			text-decoration: line-through;
		}
		.price {
			span {
				color $main-color
				margin-right 20px
			}
		}
		.share-plan {
			margin-top 10px
			flexBox(flex-start);
			.plan {
				background $main-color
				color: #fff
				padding 0 10px
				margin-right 20px
				border-radius 2px
			}
			.money {
				span {
					color $main-color
				}
			}
		}
	}
}
	.coupon-info {
		color #333
		.coupon {
			background $main-color
			padding 0 10px
			color #fff
			border-radius 2px
		}
		.copy {
			margin-top 4px
			color #065ffe
			cursor pointer
		}
		.num {
			margin-top 20px
		}
		.end-time {
			color #999
		}
	}
	.reward-info, .coin-info {
		p {
			span {
				color: $main-color
			}
		}
	}
</style>
